<template>
    <div class="ain-module-box">
        <div class="left-ain-module-box" @click="changeLeftBox">
            <div class="weather-and-xf_rest" :class="leftBox ? 'rotateY_3d' : ''">
                <div class="xf-weather xf-shadow-out">
                    <div class="xf-weather-data xf-shadow-int">
                        <h3 class="xf-city">{{ weather.city }}</h3>
                        <h4 class="xf-high">{{ weather.high }}</h4>
                    </div>
                </div>
                <div class="xf-rest xf-shadow-out">
                    <h3>{{ rest.title }}</h3>
                    <ul class="xf-rest-data xf-shadow-int">
                        <li v-for="item in rest.data" :key="item.id">
                            <span>{{ item.text }}</span>
                            <img v-lazy="item.img">
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="right-ain-module-box" @click="changeRightBox">
            <div class="fortune-and-information" :class="rightBox ? 'rotateX_3d' : ''">
                <div class="xf-fortune xf-shadow-out">
                    <h3><span>{{ fortune.title }}：</span><i class="xf_star">{{ fortune.stars }}</i></h3>
                    <ul class="xf-fortune-data xf-shadow-out">
                        <li v-for="item in fortune.data" :key="item.id">{{ item.text }}：
                            <span>
                                <em :style="`width: ${item.width}`"></em>
                            </span>
                        </li>
                    </ul>
                </div>
                <div class="xf-information xf-shadow-out">
                    <h3>
                        <img v-lazy="information.img">
                        <span>{{ information.title }}</span>
                    </h3>
                    <div class="xf-information-data xf-shadow-out">
                        <div class="jieshao">
                            <span>{{ information.introduced }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts" name="AinModule">
    import { ref } from 'vue'
    import { storeToRefs } from 'pinia'
    import { useAinModuleStore } from '@/store'
    
    const AinModuleStore = useAinModuleStore()
    AinModuleStore.getWeather()
    
    const { weather, rest, fortune, information } = storeToRefs(AinModuleStore)

    let leftBox = ref(false)
    let rightBox = ref(false)

    const changeLeftBox = () => leftBox.value = !leftBox.value
    const changeRightBox = () => rightBox.value = !rightBox.value
</script>

<style scoped lang="less">
    .ain-module-box {
        display: flex;
        height: 150px;
        justify-content: space-between;

        .left-ain-module-box,
        .right-ain-module-box {
            height: 100%;
        }

        .left-ain-module-box {
            width: 125px;
            -webkit-perspective: 500px;
            perspective: 500px;

            .weather-and-xf_rest {
                position: relative;
                -webkit-transform-style: preserve-3d;
                transform-style: preserve-3d;
                -webkit-transition: transform .5s;
                transition: transform .5s;

                .xf-weather {
                    position: absolute;
                    width: 100%;
                    height: 150px;
                    padding: 7.5px;
                    z-index: 2;
                    box-sizing: border-box;
                    backface-visibility: hidden;
                    -webkit-backface-visibility: hidden;
                    -moz-backface-visibility: hidden;

                    .xf-weather-data {
                        height: 100%;
                        background: url("../assets/images/Totoro.png") no-repeat;
                        background-size: cover;
                        text-align: left;
                        padding: 10px;
                        overflow-y: auto;

                        .xf-city {
                            font-size: 1.75em;
                            font-weight: bold;
                            color: var(--nitai5-color-9);
                            -webkit-text-shadow: var(--nitai5-text-shadow-1);
                            text-shadow: var(--nitai5-text-shadow-1);
                        }


                        .xf-high {
                            font-size: 1.25em;
                            font-weight: bold;
                            color: var(--nitai5-color-10);
                            -webkit-text-shadow: var(--nitai5-text-shadow-1);
                            text-shadow: var(--nitai5-text-shadow-1);
                        }
                    }
                }

                .xf-rest {
                    width: 100%;
                    height: 150px;
                    padding: 7.5px;
                    overflow: hidden;
                    -webkit-transform: rotateY(180deg);
                    -moz-transform: rotateY(180deg);
                    transform: rotateY(180deg);
                    -webkit-backface-visibility: hidden;
                    -moz-backface-visibility: hidden;
                    backface-visibility: hidden;

                    h3 {
                        font-size: 0.875rem;
                        font-weight: bold;
                        color: var(--nitai5-color-11);
                    }

                    .xf-rest-data {
                        height: 105px;
                        width: 100%;
                        padding: 10px;
                        margin-top: 7.5px;
                        overflow-y: auto;

                        li {
                            font-size: 0.75rem;
                            font-weight: bold;
                            color: var(--nitai5-color-12);
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            margin-top: 15px;

                            &:first-child {
                                margin-top: 0;
                            }

                            span {
                                display: inline-block;
                            }

                            img {
                                width: 1.25em;
                            }
                        }
                    }
                }
            }

            .rotateY_3d {
                -webkit-transform: rotateY(180deg);
                -moz-transform: rotateY(180deg);
                transform: rotateY(180deg);
            }
        }

        .right-ain-module-box {
            width: 210px;

            .fortune-and-information {
                position: relative;
                -webkit-transform-style: preserve-3d;
                transform-style: preserve-3d;
                -webkit-transition: transform .5s;
                transition: transform .5s;

                .xf-fortune {
                    position: absolute;
                    width: 100%;
                    height: 150px;
                    padding: 10px;
                    z-index: 2;
                    box-sizing: border-box;
                    transform: translateZ(0);

                    h3 {
                        font-size: 0.875rem;
                        font-weight: bold;
                        text-align: left;
                        -webkit-text-overflow: ellipsis;
                        -webkit-overflow: hidden;
                        -webkit-white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        white-space: nowrap;
                        margin-bottom: 5px;

                        span {
                            color: var(--nitai5-color-11);
                        }
                    }

                    .xf-fortune-data {
                        width: 100%;
                        height: 105px;
                        box-sizing: border-box;
                        padding: 10px;
                        overflow-y: auto;

                        li {
                            text-align: left;
                            margin-top: .35em;
                            display: -webkit-box;
                            display: -ms-flexbox;
                            display: flex;
                            -webkit-box-align: center;
                            -ms-flex-align: center;
                            align-items: center;

                            &:first-child {
                                margin-top: 0;
                            }

                            span {
                                display: inline-block;
                                height: 10px;
                                width: 74%;
                                border-radius: 10px;
                                -webkit-box-shadow: var(--nitai5-linear-shadow-1);
                                box-shadow: var(--nitai5-linear-shadow-1);
                                padding: 3px;

                                em {
                                    display: table;
                                    height: 4px;
                                    background-image: -moz-linear-gradient(0deg, var(--nitai5-linear-color-1));
                                    background-image: -webkit-linear-gradient(0deg, var(--nitai5-linear-color-1));
                                    background-image: -ms-linear-gradient(0deg, var(--nitai5-linear-color-1));
                                    background-image: linear-gradient(90deg, var(--nitai5-linear-color-1));
                                    border-radius: 5px;
                                    -webkit-opacity: 30%;
                                    opacity: 30%;
                                    transition: all .35s;
                                    -webkit-animation: xf_schedule 3s linear;
                                    animation: xf_schedule 3s linear;
                                }

                                @keyframes xf_schedule {
                                    0% {
                                        width: 0
                                    }
                                }
                            }
                        }
                    }
                }

                .xf-information {
                    position: absolute;
                    width: 100%;
                    height: 150px;
                    padding: 10px;
                    -webkit-transform: translateY(75px) rotateX(-90deg);
                    transform: translateZ(-75px) translateY(75px) rotateX(-90deg);

                    h3 {
                        font-size: 0.875rem;
                        font-weight: bold;
                        text-align: left;
                        display: flex;
                        align-items: center;
                        -webkit-text-overflow: ellipsis;
                        -webkit-overflow: hidden;
                        -webkit-white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        white-space: nowrap;
                        margin-bottom: 5px;

                        img {
                            width: 1.4rem;
                        }

                        span {
                            margin-left: 3px;
                            color: var(--nitai5-color-11);
                        }
                    }

                    .xf-information-data {
                        height: 105px;
                        width: 100%;
                        padding: 5px;
                        overflow-y: auto;

                        .jieshao {
                            text-align: left;
                            text-indent: 2em;
                            overflow-y: auto;
                            word-wrap: break-word;

                            span {
                                font-size: 1em;
                            }
                        }
                    }
                }
            }

            .rotateX_3d {
                -webkit-transform: rotateX(90deg);
                -moz-transform: rotateX(90deg);
                transform: rotateX(90deg);
            }
        }
    }

    .xf-night .ain-module-box {
        .left-ain-module-box .weather-and-xf_rest {
            .xf-weather .xf-weather-data {
                background: url("../assets/images/Totoro-dark.png") no-repeat;
                background-position: 20px 30px;
                background-size: 95%;

                .xf-city {
                    color: var(--nitai5-color-21);
                }

                .xf-high {
                    color: var(--nitai5-color-22);
                }
            }

            .xf-rest .xf-rest-data li span {
                color: var(--nitai5-color-3);
            }
        }

        .right-ain-module-box .fortune-and-information .xf-fortune .xf-fortune-data li span {
            -webkit-box-shadow: var(--nitai5-shadow-int-dark);
            box-shadow: var(--nitai5-shadow-int-dark);
            background-color: var(--nitai5-color-20);

            em {
                -webkit-opacity: 1;
                opacity: 1;
            }
        }
    }
</style>